<template>
	<view class="loginContainer">
		<!-- 头部 -->
		<view class="top">
			<!-- 选择语言 -->
			<view class="header">
				<view class="changeLanguage">
					<text class="language">选择语言</text>
					<text class="iconfont icon-xiala1"></text>
				</view>
				<text class="iconfont icon-dunpai"></text>
				<text class="iconfont icon-wenhao"></text>
			</view>
			<!-- logo区域 -->
			<view class="logoWrao">
				<image class="logo" src="../../static/images/login/logo.svg" mode=""></image>
				<text class="logo_text">欢迎登录小米有品</text>
			</view>
		</view>
		<!-- 登录区域 -->
		<view class="loginWrap">
			<view class="tips"><text>小米账号登陆</text></view>
			<view class="user">
				<view>
					<input class="username" type="text" v-model="username" placeholder="邮箱/手机号码/小米ID" />
					<text @click="username = ''" v-show="username !== ''" class="iconfont icon-guanbi"></text>
				</view>
				<view>
					<input v-show="!isShowPassword" class="password" type="password" v-model="password" placeholder="请输入密码" />
					<input v-show="isShowPassword" class="password" type="text" v-model="password" placeholder="请输入密码" />
					<text @click="isShowPassword = !isShowPassword" :class="{ shou_passwod: isShowPassword }" class="iconfont icon-yanjing"></text>
				</view>
			</view>
			<button type="default" class="btn" :class="{ disabled: !(username && password) }" :disabled="!(username && password)" @click="login">登录</button>

			<view class="register">
				<text>手机号登录</text>
				<text class="split_line">|</text>
				<text>立即注册</text>
				<text class="split_line">|</text>
				<text>忘记密码?</text>
			</view>
		</view>
		<!-- 其他登录方式 -->
		<view class="other">
			<view class="other_text">—— 其他登录方式 ——</view>
			<view class="other_login">
				<text class="iconfont icon-qq"></text>
				<text class="iconfont icon-weibo"></text>
				<text class="iconfont icon-zhifubao"></text>
				<text class="iconfont icon-weixin" @click="wxLogin"></text>
				<text class="iconfont icon-pinpaibiaoshi_pingguo"></text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowPassword: false,
			username: '',
			password: '',
			fromPath: '/'
		};
	},
	onLoad(options) {
		// console.log(options)
		this.fromPath += options.redirect;
	},
	methods: {
		login() {
			console.log('登录');
		},
		wxLogin() {
			wx.getUserProfile({
				desc: '是否确认授权登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: res => {
					//将用户信息登陆信息存储本地
					wx.setStorageSync('userInfo',res.userInfo)					
					//跳转到来的时候的页面
					wx.reLaunch({
						url: this.fromPath
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.loginContainer {
	height: 100%;
	background-color: #ffffff;
	// 头部
	.top {
		height: 410rpx;
		background-image: url(../../static/images/login/login_bgc.png);
		background-position: center;
		padding: 40rpx;
		.header {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: rgba(0, 0, 0, 0.5);
			.changeLanguage {
				flex: 1;
				.icon-xiala1 {
					font-size: 20rpx;
					padding-left: 4rpx;
				}
			}
			.icon-dunpai,
			.icon-wenhao {
				margin-right: 40rpx;
			}
		}

		// logo区域
		.logoWrao {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			// background-color: pink;
			padding-top: 110rpx;
			.logo {
				height: 96rpx;
				width: 96rpx;
			}
			.logo_text {
				color: rgba(0, 0, 0, 0.6);
				font-size: 28rpx;
				margin-top: 40rpx;
			}
		}
	}
	// 登陆区域
	.loginWrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 40rpx;
		margin-top: -40rpx;
		.tips {
			width: 100%;
			// align-self: flex-start;
			font-size: 42rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.user {
			width: 100%;
			& > view {
				margin-top: 20rpx;
				position: relative;
				input {
					height: 100rpx;
					background-color: #f0f0f0;
					padding: 0 80rpx 0 40rpx;
					border-radius: 40rpx;
				}
				.iconfont {
					position: absolute;
					top: 50%;
					right: 0;
					transform: translate(-50%, -50%);
					font-size: 40rpx;
					&.shou_passwod {
						color: #0b84ff;
					}
				}
			}
		}
		.btn {
			width: 100%;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			margin-top: 30rpx;
			background-color: #0b84ff;
			color: #ffffff;
			font-size: 35rpx;
			font-weight: bold;
			border-radius: 50rpx;
			&.disabled {
				opacity: 0.5;
			}
		}
		.register {
			// width: 100%;
			color: rgba(0, 0, 0, 0.54);
			font-size: 26rpx;
			margin-top: 20rpx;
			.split_line {
				margin: 0 10rpx;
			}
		}
	}
	// 其他登录方式
	.other {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 40rpx;
		.other_text {
			font-size: 24rpx;
			color: rgba($color: #000000, $alpha: 0.2);
			margin-top: 30rpx;
		}
		.other_login {
			width: 90%;
			display: flex;
			justify-content: space-around;

			line-height: 100rpx;
			.iconfont {
				font-size: 60rpx;
				// color: #C5EAFE;
			}
			.icon-qq {
				color: #c5eafe;
			}
			.icon-weibo {
				color: #ea5d5c;
			}
			.icon-zhifubao {
				color: #1989fa;
			}
			.icon-weixin {
				color: #50b674;
			}
			.icon-pinpaibiaoshi_pingguo {
				color: #33353b;
			}
		}
	}
}
</style>
